<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 300px; overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="onCreated" @onChange="onChange" @onBlur="onBlur" />
    <!-- <input type="file"> -->
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";

export default {
  components: { Editor, Toolbar },
  props: ['editorData'],
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        // toolbarKeys-重新配置工具栏，显示哪些菜单，以及菜单的排序、分组
        toolbarKeys: [
          "headerSelect",
          "bold",
          "underline",
          "italic",
          "color",
          "bgColor",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "bulletedList",
          "numberedList",
          "todo",
          "|",
          "emotion",
          "uploadImage",
          "insertLink",
          "insertTable",
          "codeBlock",
          "divider",
        ],
      },
      editorConfig: { placeholder: "请输入内容...", autoFocus: false, MENU_CONF: {} },
      mode: "default", // or 'simple'
    };
  },
  watch: {
    editorData(val) {
      // console.log('val-------', val);
      this.$nextTick(() => {
        this.html = val;
        // 方法2：操作editor方法  获取值getHtml()  设置值setHtml()
        // this.editor.setHtml(val);
      })
    }
  },
  methods: {
    onCreated(editor) {
      // console.log(editor);
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      this.$emit('sendEditor', this.html);
      // console.log('sendEditor', this.html);
      // console.log(editor);
      // console.log("onChange----------查看导航栏的所有菜单项 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组");
      // const toolbar = DomEditor.getToolbar(editor);
      // console.log("111111", toolbar.getConfig().toolbarKeys);
    },
    onBlur() {
      // 失去焦点---认为书写完了--发送给父组件
      // console.log('编辑器输入的值：' , this.html);
      // console.log(this.editor.getHtml());
      // this.$emit('sendEditor', this.html);
    },
    clear() {
      // 清空编译器
      // this.html = '';
      this.editor.clear();
    },
    uploadImg() {
      let that = this;
      this.editorConfig.MENU_CONF['uploadImage'] = {  // TS 语法
        // 自定义上传
        async customUpload(file, insertFn) {                   // JS 语法
          // file 即选中的文件   <input type="file"></input>
          // 表单上传文件时 multipart/form-data
          let formData = new FormData();
          formData.append("file", file); // file 后台接收变量字段 file
          // 网络请求
          let res = await that.$api.batchUpload(formData);
          console.log(res.data);
          let {url, alt, href} = res.data;
          // 自己实现上传，并得到图片 url alt href
          // 最后插入图片
          insertFn(url, alt, href);
        }
      }
    }
  },
  created() {
    this.uploadImg();
  },
  // vue组件生命周期函数--挂载组件完毕
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    // }, 1500);
  },
  // 销毁之前--清空编译器-优化
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>


<style src="@wangeditor/editor/dist/css/style.css"></style>